<template>
  <view>
    <c-header></c-header>
    <!-- <view class="accordion">
      <view
        :key="item.id"
        @tap="handleClick(item.id)"
        v-for="item in navItem"
        class="accordion-item"
      >
        {{ item.name }}
      </view>
    </view>
    遮罩层
   <view class="b1" @tap="close" v-if="show"></view> 
    <view class="accordion-desk" v-if="show" >
      <view  v-for="(item, index) in navCont" :key="index">
        <view class="accordion-desk-content" :class="indexId==0?'classA':indexId==1?'classB':'classC'">{{item.title}}</view>
      </view>
    </view>
    <view class="accordion-desk-classb">
      
    </view>-->
    <view class="campus-library">
      <view class="campus-library-content">
        <view class="campus-library-image">
          <image src="https://img.k12zx.com/schoologo/14942220699205.jpg"></image>
        </view>
        <view class="library-content">
          <view class="library-content-title">上实剑桥浦东校区</view>
          <view class="library-content-text">
            <view class="content-text-prefix">留学方向：</view>
            <view class="text-content">美国 英国 澳大利亚 加拿大 日本 </view>
          </view>
          <view class="library-content-text">
            <view class="content-text-prefix">学校性质：</view>
            <view class="text-content">私立学校</view>
          </view>
        </view>
      </view>
    </view>
    <c-footer></c-footer>
  </view>
</template>

<script>
import headers from '../../components/header/headers.vue';
import footers from '../../components/footer/footers.vue';
import "./index.css";
export default {
  components:{
    footers,
    headers,
  },
  data() {
    return {
      indexId: "",
      classA:'accordion-desk-content',
      classB:'accordion-desk-classb',
      navCont: [],
      show: false,
      navItem: [
        {
          id: "0",
          name: "学习阶段",
          content: [
            {
              id: "0",
              title: "全部",
            },
            {
              id: "1",
              title: "国际学校",
            },
            {
              id: "2",
              title: "海外高中",
            },
          ],
        },
        {
          id: "1",
          name: "学校性质",
          content: [
            {
              id: "0",
              title: "这是测试文字",
            },
          ],
        },
        {
          id: "2",
          name: "所在地区",
          content: [
            {
              id: "0",
              title: "很多个东西",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleClick: function (userInfo) {
      this.indexId = userInfo
      for (let i = 0; i < this.navItem.length; i++) {
      
        if (this.navItem[i].id === userInfo) {
          this.navCont = this.navItem[i].content;
        }
      }
      console.log(this.navCont);
      // this.index  =userInfo
      // this.navCont =
      this.show = !this.show;
    },
    close: function () {
      this.show = false;
    },
  },
};
</script>

<style>
.accordion {
  width: 100%;
  height: 80px;
  background-color: chartreuse;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  z-index: 2;
}
.accordion-desk {
  width: 100%;
  background-color: yellow;
  z-index: 2;
}
.accordion-desk-content {
  border-top: 1px solid #999;
  display: flex;
  align-items: center;
  padding-left: 30px;
  width: 100%;
  height: 70px;
}
.accordion-desk-classb{
  background-color: blue;
}
.campus-library {
  margin-top: 20px;
  display: flex;
  background-color: white;
}
.campus-library-content {
  display: flex;
  width: 92%;
  height: 200px;
  margin: auto;
  padding: 20px 0px;
  border-bottom: 1px dotted #e9e9e9;
}
.campus-library-image {
  width: 120px;
  height: 120px;
}
.library-content {
  height: 100%;
  padding: 0px 30px;
}
.library-content-title {
  margin-bottom: 18px;
  font-weight: bold;
}
.library-content-text {
  margin-bottom: 18px;
  display: flex;
  font-size: 25px;
}
.content-text-prefix {
  font-weight: bold;
}
.text-content {
  color: #999;
}
</style>
